import * as echarts from 'echarts'
const color = ['#165DFF', '#2CB8C5', '#F0B114', '#885BD2', '#B6D8F3']
export function pieChartFun(data, chartsId) {
    let pieCharts = echarts.init(document.getElementById(chartsId));
    let seriesData = (data.yData || []).map((item, index) => {
        return {
            name: item.name,
            value: item.value,
            percent: item.percent,
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    borderColor: '#fff',
                },
            },
        };
    });
    let pieChartsOption = {
        color,
        title: {
          text: data.title,
          left: "left",
          textStyle: {
            color: "#2C2C2C",
            fontSize: 16,
          },
        },
        grid: {
            top: data.gridTop ? data.gridTop : '12%',
            left: '4%',
            right: '2%',
            bottom: '8%',
            containLabel: true,
        },
        tooltip: {
            trigger: "item",
            show: true,
            formatter: function (param) {
                if(param.name !== ""){
                    let html = `<div style="color:#333">${param.name}</div>`;
                    html += `<div>数量：${param.value}</div>`;
                    html += `<div>占比：${param.percent}%</div>`;
                    return html;
                }
            },
        },
        color: ['#77A9FF', '#48C360', '#FFD972', '#E16B6D', '#4DB6AF', '#BA8FE9'],
        legend: {
            align: 'left',
            orient: 'vertical',
            top: '20',
            data: seriesData,
            right: '50',
            bottom: '0',
			icon: 'circle',
			itemWith: 10,
			itemHeight: 10,
            // formatter: "{b} : {c} ({d}%)",
            formatter: function (val) {
                return `{title|${val}}{value|${seriesData.find(item => item.name === val).percent}}`
            },
            
            textStyle: {
                rich: {
                    title: {
                        fontSize: 12,
                        color: "#666666",
                    },
                    value: {
                        fontSize: 12,
                        color: "#666666",
                        padding: [0, 0, 0, 60]
                    }
                }
            },
            type: 'scroll',
            pageIconColor: '#666',
            pageIconInactiveColor: '#333',
            pageIconSize: '8',
        },
        series: [
            {
                type: 'pie',
                radius: ['2%', '80%'],
                center: ['20%', '50%'],
                label: { // 鼠标悬浮具体数据显示
                    show: false
                },
                data: seriesData,
            }
        ],
    };
    pieCharts.setOption(pieChartsOption, true);
    return pieCharts
}
